<script setup lang="ts">
import MessageList from "@/components/widgets/messageList/messageList.vue";
import {inject, ref} from "vue";
import UserCenter from "@/components/widgets/userCenter/userCenter.vue";

//用来把messageBtn传过去用于MessageList判断是否ClickAway
const messageBtnRef = ref<Document | null>(null)
//用于调用MessageList暴露的方法
const messageListRef = ref<Document | null>(null)

//用来把userCenterBtn传过去用于UserCenter判断是否ClickAway
const userCenterBtnRef = ref<Document | null>(null)
//用于调用UserCenter暴露的方法
const userCenterRef = ref<Document | null>(null)
const userInfo = inject("userInfo")
</script>
<template>
  <div class="right-bar">
    <!--用户-->
    <div class="item-func" @click="userCenterRef.handlerUserCanter()" ref="userCenterBtnRef">
      <div class="material-icons icon">account_circle</div>
      <div class="text" v-if="userInfo">{{userInfo.nickname}}</div>
      <!-- 个人中心-->
      <UserCenter :btn-dom="userCenterBtnRef" ref="userCenterRef"></UserCenter>
    </div>

    <!-- 消息列表-->
    <div class="item-func" @click="messageListRef.handlerMessageList()" ref="messageBtnRef">
      <div class="material-icons icon">sms</div>
    </div>
  </div>
  <!-- 消息列表-->
  <MessageList :btn-dom="messageBtnRef" ref="messageListRef"></MessageList>
</template>
<style lang="less" scoped>
.right-bar {
  display: flex;
  align-items: center;

  .item-func {
    position: relative;
    user-select: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    height: 30px;
    //width: 40px;
    padding: 0 10px;
    justify-content: center;

    .icon {
      font-weight: 300;
      font-size: 22px;
      height: 30px;
      line-height: 30px;
    }
    .text {
      margin-left: 8px;
      font-weight: 600;
    }
  }

  .item-func:hover {
    background-color: rgba(255, 255, 255, 0.4);
  }

  .item-func:active {
    background-color: rgba(0, 0, 0, 0.1);
  }
}
</style>
